<template>
  <div class="shouye-index">
    <div class="f-title"> {{ logoTitle }}</div>
    <div class="menu_items">
      <router-link
        v-for="tag in visViews"
        v-hasPermi="tag.hasPermi"
        :key="tag.path"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
        :style="activeStyle(tag)"
        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
      >
        <div class="fun-div">
          <div :class="tag.icon" class="img-div"></div>
          <div> {{ tag.title }}</div>

        </div>
      </router-link>
    </div>
    <!--  底部  -->
    <div class="el-login-footer">
      <!--      <span>Copyright © 2022  All Rights Reserved.</span>-->
    </div>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
// import Logo from "./Logo";
import SidebarItem from '@/layout/components/Sidebar/SidebarItem'
import variables from '@/assets/styles/variables.scss'
import axios from 'axios'
import { getMapRegionByCode, getMapRegionCode } from '@/api/portal/regionConfig'
import { isExternal } from '@/utils/validate'
import path from 'path'
import globalmf from "@/utils/Global/GlobalMapFunction";
import Bus from "@/utils/bus"
import globalVariable from '@/utils/Global/globalVariable'
export default {
  name: 'Index',
  data() {
    return {
      // 版本号
      version: '3.8.2',
      logoTitle: null,
      item: {},
      visViews: [
        {
          fullPath: '/mapyzt',
          icon: 'yzticon',
          name: 'mapyzt',
          path: '/mapyzt',
          title: '一张图',
          query: null,
          hasPermi:['mapyzt:see']
        },

        {
          fullPath: '/gbzcb/gbzcbPro',
          icon: 'gbzprojecticon',
          name: 'gbzprojectproStatis',
          path: '/gbzcb/gbzcbPro',
          title: '多规合一',
          query: null,
          //hasPermi:['business:gbzxm:searchHiProject']
        },
        {
          fullPath: '/system/log/logininfor',
          icon: 'yunweiicon',
          name: 'systemuser',
          path: '/system/log/logininfor',
          title: '运维平台',
          query: null,
          hasPermi:['monitor:logininfor:list']
        }
        // {
        //   fullPath: '/system/dict',
        //   icon: 'charticon',
        //   name: 'systemdict',
        //   path: '/system/dict',
        //   title: '系统管理',
        //   query: null
        // }
      ]
      // item:this.sidebarRouters[8].children[0],
    }
  },
  components: { SidebarItem },
  computed: {
    ...mapState(['settings']),
    ...mapGetters(['sidebarRouters', 'sidebar']),
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    },
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo
    },
    variables() {
      return variables
    },
    isCollapse() {
      return !this.sidebar.opened
    }
  },
  created() {
    this.logoTitle = process.env.VUE_APP_TITLE
    // this.item = this.sidebarRouters[8].children[0]
    // alert("created");
    //2022年10月11日 LQ 加入地图相关代码


  },
  mounted() {
    globalVariable.getRegionAndSettingAxios();
    let hs = document.getElementById('appwrapper')
    let sc = hs.getElementsByClassName('sidebar-container')[0]
    sc.classList.add('width-zero')
    globalmf.initx2js();
  },
  methods: {
    goTarget(href) {
      //  window.open(href, "_blank");
    },
    isActive(route) {
      return route.path === this.$route.path
    },
    activeStyle(tag) {
      if (!this.isActive(tag)) return {}
      return {
        'background-color': this.theme,
        'border-color': this.theme
      }
    },
    isAffix(tag) {
      return tag.meta && tag.meta.affix
    },




  },

  beforeDestroy() {
    let hs = document.getElementById('appwrapper')
    let sc = hs.getElementsByClassName('sidebar-container')[0]
    sc.classList.remove('width-zero')
    if (this.sidebar.opened) {//打开状态就不管了
      //  sc.style.cssText="width:200px ";
    } else {
      let sc = hs.getElementsByClassName('sidebar-container')[0]
      //  sc.style.cssText="width:54px ";
    }
  }

}
</script>
<style>
.width-zero {
  display: none;
}
</style>
<style scoped lang="scss">

.f-body {
  margin: 40px;
}

.fun-div {
  //width: 20vw;
  //height: 25vh;
  width: 200px;
  height: 160px;
  background-color: rgba(242, 248, 251, 1);
  margin: 20px 30px 40px 30px;
  cursor: pointer;
  display: inline-block;
  font-size: x-large;
  border-radius: 20px;
  padding-bottom: 6px;
  -webkit-transition: 0.8s;
  z-index: 8;
}

.fun-div:hover {
  background-color: #ddfede;
  //font-size: xx-large;
  //font-weight: bolder;
}

.img-div {
  //width: 15vw;
  //height: 19vh;
  width: 100px;
  height: 100px;
  background-size: cover;
  display: inline-block;
  margin-top: 10px;
}

.f-title {
  //position: absolute;
  //top: 20px;
  color: #058b47;
  font-size: 48px;
  font-weight: bold;
  padding-top: 40px;
}
.farmOverviewicon{
  background-image: url("~@/assets/images/icon/farmOverviewicon.png");
}
.yzticon {
  background-image: url("~@/assets/images/icon/yzticon.png");
}

.onlineVerifiicon {
  background-image: url("~@/assets/images/icon/onlineVerifiicon.png");
}

.searchicon {
  background-image: url("~@/assets/images/icon/searchicon.png");
}

.gbzprojecticon {
  background-image: url("~@/assets/images/icon/gbzprojecticon.png");
}

.remoteicon {
  background-image: url("~@/assets/images/icon/remoteicon.png");
}

.yunweiicon {
  background-image: url("~@/assets/images/icon/yunweiicon.png");
}

.charticon {
  background-image: url("~@/assets/images/icon/charticon.png");
}

.gbzcbicon {
  background-image: url("~@/assets/images/icon/gbzcbicon.png");
}

.todoicon {
  background-image: url("~@/assets/images/icon/todoicon.png");
}

.doneicon {
  background-image: url("~@/assets/images/icon/doneicon.png");
}

.topTitle {
  /*padding: 20px;*/
  /*background: rgba(255, 255, 255, 0);*/
  text-align: center;
}

.shouye-index {
  position: fixed;
  height: 100%;
  background-image: url("~@/assets/images/index-background.jpg");
  background-size: cover;
  text-align: center;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: 8;
  padding-top: 70px;
  align-items: center;
  display: grid;
  justify-content: center;
}


h4 {
  margin-top: 0px;
}

.el-row {
  display: initial;
}

.el-col {
  border-radius: 4px;
  //background-color: #1c84c6;
  min-height: 36px;
}

.menu_items, .menu_items2 {
  //height: calc(100% - 200px);
  display: block;
  margin: 60px auto;
  text-align: center;
  max-width: 800px;
}

.menuList, .menuListWrap {
  //display: -webkit-box;
  //display: -ms-flexbox;
  display: flex;
  //-webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

</style>

